// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
// See the LICENCE file in the repository root for full licence text.

.forum-item-stripe {
  --width: 7px;
  --width-desktop: 9px;
  --arrow-opacity: 0;
  position: absolute;
  inset: 0 auto 0 0;
  padding-right: @border-radius-base;
  width: var(--width);
  .center-content();
  transition: @forum-item-animate;
  background-color: inherit;

  &::after {
    content: "";
    position: absolute;
    inset: 0 0 0 auto;
    width: @border-radius-base;
    border-radius: @border-radius-base 0 0 @border-radius-base;
    background-color: inherit;
  }

  &::before {
    content: "";
    .full-size();
    border-radius: @border-radius-base 0 0 @border-radius-base;
    background-color: var(--forum-bg);
  }

  .forum-item:hover &,
  .forum-topic-entry:hover & {
    --width-desktop: 24px;
    --arrow-opacity: 1;
  }

  @media @desktop {
    width: var(--width-desktop);
  }

  &__arrow {
    .fas();
    color: var(--forum-item-background-color-hover);
    position: relative;
    opacity: var(--arrow-opacity);
    display: none;

    &::before {
      content: @fa-var-angle-right;
    }

    @media @desktop {
      display: block;
    }
  }
}
